<template>
	<view class="overhaul-container">
		<view class="list-wrap" v-if="value.length>0">
			<view class="item-wrap" v-for="(item,index) in value" :key="item.businessId">
				<view class="item-header">
					<view class="time">{{item.businessTime}}</view>
					<image v-if="editable" @click="deleteItem(index)" class="delete-icon"
						src="@/static/images/special-work/icon-delete.png" mode="aspectFit"></image>
				</view>
				<view class="item-content">
					<view class="content-wrap">
						<view class="content-label">检修内容：</view>
						<view class="content-value">{{item.workContent}}</view>
					</view>
					<view class="content-wrap">
						<view class="content-label">当前节点：</view>
						<view class="content-value" :class="'status-' + item.workStatusValue">{{item.workStatus}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Overhaul",
		props: {
			value: {
				type: Array,
				default: () => {
					return [];
				},
			},
			editable: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			deleteItem(index) {
				let arr = this.value
				arr.splice(index, 1)
				this.$emit('input', arr)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.overhaul-container {
		.list-wrap {
			max-height: 50vh;
			overflow-y: auto;
			padding: 30rpx;

			.item-wrap {
				background: #FFFFFF;
				box-shadow: 0px 4rpx 10rpx 1rpx rgba(204, 204, 204, 0.5);
				border-radius: 10rpx;
				margin-bottom: 30rpx;

				.item-header {
					background: #F1F6F9;
					border-radius: 10rpx 10rpx 0px 0px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					line-height: 42rpx;
					padding: 20rpx 30rpx;

					.time {
						font-size: 30rpx;
						font-weight: 800;
						color: #333333;
					}

					.delete-icon {
						width: 40rpx;
						height: 43rpx;
					}
				}

				.item-content {
					padding: 20rpx 30rpx 10rpx 30rpx;

					.content-wrap {
						display: flex;
						font-size: 30px;
						line-height: 42rpx;
						padding-bottom: 20rpx;

						.content-label {
							color: #666666;
							min-width: 140rpx;
						}

						.content-value {
							color: #333333;

							&.status-1 {
								color: #A14430;
							}

							&.status-2 {
								color: #C4C088;
							}

							&.status-3 {
								color: #88B4C4;
							}
						}
					}

				}
			}
		}
	}
</style>